<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="central/include :: header('站位人工操作')" />
    <style>
        html,body{
            height:100%;
            padding:0;
            margin:0;
        }
        .el-container{
            height:100%;
        }
        .gray-bg{
            background-color: #f3f3f4;
        }
        .ibox-title{
            border-bottom: 1px solid rgb(231, 234, 236);
        }
        .container-div{
            padding: 0px;
        }
        .left-main,.right-main {
            background: #fff;
            border-radius: 6px;
            box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
            padding: 5px;
        }
        .el-steps--vertical{
            padding: 5% 0px 0px 10%;
            width: 100%;
            background: #fff;
            border-radius: 6px;
            box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            /*background-color: #D3DCE6;*/
            /*color: #333;*/
            text-align: center;
            /*line-height: 200px;*/
        }

        .el-main {
            padding: 10px;
            color: #333;
            text-align: center;
            /*line-height: 160px;*/
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .descriptions{
            margin: 10px 0px 10px 5px;
        }
        .finish-container-div{
            text-align: right;
            margin-right: 10%;
        }
        .container-main,.container-left-main,.container-right-main{
            height: 100%;
        }
        .el-table .running-row {
            background: #f0f9eb;
        }
        .el-timeline-item__timestamp,.el-card__body{
            text-align: left;
        }
        /*文字不自动换行*/
        .el-card__body h4,p{
            white-space:nowrap;
            text-overflow:ellipsis;
            word-break:break-all;
            overflow:hidden;
        }
        .timeline-container{
            overflow: auto;
            height: 75%;
        }
        #app>div{
            height: 100%;
        }
        .process-step-container{
            height: 100%;
        }
        .task-cmd-run-table-container{
            height: 70%;
        }
        .task-cmd-run-table-container>.el-table{
            overflow: auto;
            height: 100%;
        }
    </style>
</head>
<body class="gray-bg">
<div id="app" class="container-div">
    <el-skeleton :rows="12" animated :loading="initLoading">
        <template slot="template">
            <div class="container-div">
                <el-skeleton :rows="22" animated />
            </div>
        </template>
        <template>
            <el-container>
                <el-aside width="300px">
                    <div class="ibox-title">
                        <h3>产品工艺流程：<span th:text="${material.artProcessRun.name}"></span></h3>
                    </div>
                    <el-steps direction="vertical" :active="activeProcessStepRunIndex">
                        <template v-for="(item,index) in processStepRunList">
                            <el-step :title="item.name" :status="item.taskStatus|statusFormat" :icon="item.icon" >
                            </el-step>
                        </template>
                    </el-steps>
                </el-aside>
                <el-container>
                    <!--            <el-header>Header</el-header>-->
                    <el-container>
                        <el-main>
                            <el-row :gutter="20" class="container-main ">
                                <el-col :span="8" class="container-left-main">
                                    <div class="container-div left-main">
                                        <div class="ibox-title">
                                            <h5>站位加工详情</h5>
                                        </div>
                                        <div class="descriptions">
                                            <el-descriptions :column="2">
                                                <el-descriptions-item label="站位名称">[[${material.operationStation.name}]]</el-descriptions-item>
                                                <el-descriptions-item label="执行工序名称">{{activeProcessStepRun.name}}</el-descriptions-item>
                                                <el-descriptions-item label="产品批次号">{{material.batchNo}}</el-descriptions-item>
                                                <el-descriptions-item label="产品编号">{{material.id}}</el-descriptions-item>
                                            </el-descriptions>
                                        </div>
                                        <div class="timeline-container">
                                            <el-timeline>
                                                <template v-for="(item,index) in processStepRunListOfTimeLine">
                                                    <el-timeline-item v-if="item.taskStatus == taskStatus.EXECUTED_FINISH" :timestamp="item.createTime|timeInterval(item.updateTime)" placement="top">
                                                        <el-card>
                                                            <h4>更新工序：{{item.name}} 为 {{item.taskStatus|selectDictLabel(taskStatusDataList)}}</h4>
                                                            <p>{{item.updateBy}} 提交于 {{item.updateTime}}</p>
                                                            <p :title="'工序完成描述：'+item.remark?item.remark:''">工序完成描述：{{item.remark}}</p>
                                                        </el-card>
                                                    </el-timeline-item>
                                                    <el-timeline-item v-else :timestamp="item.createTime|dateFormat" placement="top">
                                                        <el-card>
                                                            <h4>更新工序：{{item.name}} 为 {{item.taskStatus|selectDictLabel(taskStatusDataList)}}</h4>
                                                            <p :title="'工序完成描述：'+item.remark?item.remark:''">{{item.updateBy}} 提交于 {{item.createTime}}</p>
                                                        </el-card>
                                                    </el-timeline-item>
                                                </template>
                                            </el-timeline>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="16" class="container-right-main">
                                    <div class="container-div right-main">
                                        <!-- 执行工序模板 -->
                                        <component is="process-step-run-component" @finished-call-back-for-process-step-run="loadData" :active-process-step-run="activeProcessStepRun" ></component>
<!--                                        <process-step-run-component @finished-call-back-for-process-step-run="loadData" :active-process-step-run="activeProcessStepRun" />-->
                                    </div>
                                </el-col>
                            </el-row>
                        </el-main>
                    </el-container>
                </el-container>
            </el-container>
        </template>
    </el-skeleton>
</div>
<template id="process-step-run-template" >
    <div class="process-step-container">
        <div class="ibox-title">
            <h5>人工操作反馈</h5>
        </div>
        <div class="descriptions task-cmd-run-table-container">
            <!--带边框 默认按照权重进行顺序排序-->
            <el-table
                    :data="taskCmdRunList"
                    :default-sort="{prop:'weight','order':'ascending'}"
                    border
                    :row-class-name="tableRowClassName"
                    highlight-current-row
            >
                <el-table-column
                        label="指令名称"
                        >
                    <template slot-scope="scope">
                        {{ scope.row.taskCmd|showData('name') }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="指令类型"
                        >
                    <template slot-scope="scope">
                        <template v-for="(item,index) in operationTypeDataList">
                            <el-tag v-if="item.dictValue==scope.row.taskCmd.type"
                                    :type="item.listClass" effect="dark">
                                {{item.dictLabel}}
                            </el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作手册">
                    <template slot-scope="scope">
                        <el-image v-if="isImage(scope.row.taskCmd)"
                                  :src="scope.row.taskCmd.resourcePath"
                                  :preview-src-list="[scope.row.taskCmd.resourcePath]">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                        <el-link
                                v-else-if="scope.row.taskCmd && scope.row.taskCmd.resourcePath"
                                type="primary"
                                @click="showView(scope.row.taskCmd)"
                        >
                            查看<i class="el-icon-view el-icon--right"></i> </el-link>
                        <p v-else>暂无数据</p>
                    </template>
                </el-table-column>
                <el-table-column
                        label="指令执行状态"
                        >
                    <template slot-scope="scope">
                        <template v-for="(item,index) in taskStatusDataList" >
                            <el-tag v-if="item.dictValue==scope.row.taskStatus"
                                    :type="item.listClass" effect="dark">
                                {{item.dictLabel}}
                            </el-tag>
                        </template>
                    </template>
                </el-table-column>

                <el-table-column
                        label="执行顺序"
                        sortable
                        prop="wight">
                    <template slot-scope="scope" >
                        {{scope.row.weight}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">

                        <el-button type="primary" icon="el-icon-check"
                                size="mini"
                                   v-task-status = "scope.row"
                                   @click="handleTaskCmdRun(scope.row)"
                                ></el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div class="finish-container-div" style="margin: 10px;">
            <el-form :model="processRunStepForm" :rules="rules" ref="ruleForm">
                <el-form-item label="工序完成描述" prop="remark" v-show="!processStepRunDisable">
                    <el-input type="textarea" v-model="processRunStepForm.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="processStepRunDisable" @click="handleFinishedProcessStepRun">工序完成</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<th:block th:include="central/include :: footer" />
<script th:inline="javascript">

    // const materialId = [[${material.id}]];//物料编号
    // const artProcessRunId = [[${material.artProcessRun.id}]];//工艺执行编号
    const operationTypeDataList = [[${@dict.getType('central_operation_type')}]]
    const taskStatusDataList = [[${@dict.getType('sys_task_status')}]]
    const prefix = ctx + "central/manualOperationStation";

    const operationType = {
        //自动
        AUTOMATIC_TYPE:{value:1},
        //手动
        MANUAL_TYPE:{value:2}
    }

    Vue.filter('timeInterval',(startTime,endTime,join=' 至 ')=>{
        if(startTime && endTime)
            return $.common.dateFormat(startTime) + join + $.common.dateFormat(endTime)
        return '暂无数据'
    })

    Vue.filter('dateFormat',(value,format='yyyy-MM-dd',defaultValue='暂无数据')=>{
        if(value){
            return $.common.dateFormat(value,format)
        }
        return defaultValue
    })

    Vue.filter('selectDictLabel',(value,dictDataList,defaultValue='暂无数据')=>{
        if(dictDataList instanceof Array){
            const dictData = dictDataList.find(item=> item.dictValue == value)

            if(dictData){
                return dictData.dictLabel
            }
        }
        return defaultValue
    })

    Vue.filter('showData',(source,property,defaultValue='暂无数据')=>{
        if(source && property){
            return source [property]
        }
        return defaultValue
    })

    const vm1 = new Vue({
        el:'#app',
        data(){
            return{
                processStepRunList:[],//当前产品的工序列表
                activeProcessStepRunIndex:0,//当前正在执行中的工步 下标
                activeProcessStepRun:{},//当前正在执行中的工步
                artProcessRun:{
                    materialId:[[${material.id}]],//物料编号
                    artProcessRunId:[[${material.artProcessRun.id}]],//工艺执行编号
                },material:{
                    batchNo:[[${material.batchNo}]],//产品批次号
                    id:[[${material.id}]],//物料编号
                },processStepRunListOfTimeLine:[],
                taskStatus:task_status,
                taskStatusDataList:taskStatusDataList,
                initLoading:true
            }
        },
        methods:{
            //获取加工工步列表
            getProcessStepRunList(){
                return $.axiosRequest.get(prefix+'/getReaTimeProcessStepList',this.artProcessRun)
            },getActiveProcessStep(){
                this.activeProcessStepRunIndex = this.processStepRunList.findIndex(item=>item.taskStatus == task_status.EXECUTING)
                this.activeProcessStepRun = this.processStepRunList[this.activeProcessStepRunIndex]
            },
            //获取执行工序列表的 加工时间线
            getTimeLineByArtProcessRunId(){
                return $.axiosRequest.get(prefix+"/getTimeLineByArtProcessRunId/"+this.artProcessRun.artProcessRunId)
            },loadData(){
                axios.all([
                    this.getProcessStepRunList(),
                    this.getTimeLineByArtProcessRunId()
                ]).then(axios.spread((resOfProcessStepRunList,resOfTimeLineByArtProcessRunId)=>{
                    this.processStepRunList = resOfProcessStepRunList.data
                    this.processStepRunListOfTimeLine = resOfTimeLineByArtProcessRunId.data
                    this.initLoading = false
                }))
            }
        },
        filters:{
            statusFormat(status){
                switch(status){
                    case task_status.EXECUTING:
                        return "process"
                    case task_status.EXECUTED_FAIL:
                        return "error"
                    case task_status.EXECUTED_FINISH:
                        return "finish"
                    default:
                        return ""
                }
            }
        },
        watch:{
            processStepRunList(newVal,oldVal){
                this.$nextTick(()=>{
                    this.getActiveProcessStep()
                })
            }
        },
        created(){
            this.loadData()
        },
        components:{
            'processStepRunComponent':{
                template:'#process-step-run-template',
                props:{
                    //当前正在执行的工序对象
                    activeProcessStepRun:{
                        required:true,
                        default:()=>{},
                    },
                },
                data(){
                    return{
                        processRunStepForm:{
                            artProcessRunId:null,
                            processStepRunId:null,
                            remark:''
                        },operationTypeDataList:operationTypeDataList,
                        taskStatusDataList:taskStatusDataList,
                        taskStatus:task_status,
                        operationType:operationType,
                        taskCmdRunList:[],
                        rules:{
                            remark: [
                                { required: true, message: '请填写工序完成描述', trigger: 'blur' }
                            ]
                        }
                    }
                },
                methods:{
                    getTaskCmdListByProcessStepRun(){//获取执行工序下的 所有 执行指令集合
                        const processStepRunId = this.activeProcessStepRun.id
                        $.axiosRequest.get(prefix+"/getTaskCmdRunListByProcessStepRunId/"+processStepRunId)
                            .then(res=>{
                                if(res.data instanceof Array){
                                    this.taskCmdRunList = res.data
                                }
                            })
                    },
                    handleFinishedProcessStepRun(){//完成当前工序
                        this.$refs['ruleForm'].validate((valid)=>{
                            if(valid){
                                this.processRunStepForm.artProcessRunId = this.activeProcessStepRun.artProcessRunId
                                this.processRunStepForm.processStepRunId = this.activeProcessStepRun.id

                                $.axiosRequest.post(prefix+'/toCompleteProcess',this.processRunStepForm)
                                    .then(res=>{
                                        const activeArtProcessRun = res.data
                                        //恢复数据为原始状态
                                        this.restoreToOriginalData()
                                        if(activeArtProcessRun && activeArtProcessRun.taskStatus &&
                                            activeArtProcessRun.taskStatus == task_status.EXECUTED_FINISH){
                                            $.modal.close();
                                            parent.$.modal.msgSuccess(`物料编号：${activeArtProcessRun.prodId},工艺名称：${activeArtProcessRun.name}，下所有的工序已完成加工！`);
                                            parent.$.table.refresh();
                                            return
                                        }
                                        $.modal.msgSuccess(res.msg)
                                        this.$emit('finished-call-back-for-process-step-run')
                                    })
                            }
                        })
                    },showView(taskCmd){
                        $.operate.detailShow(taskCmd.resourcePath,taskCmd.title)
                    },tableRowClassName({row,rowIndex}){
                        if(row.taskStatus == task_status.EXECUTING){
                            return 'running-row'
                        }
                        return ''
                    },isImage(taskCmdRun){
                        if(taskCmdRun && taskCmdRun.resourcePath){
                            const value = taskCmdRun.resourcePath
                            //value不为空并且value的类型为 图片类型
                            if($.common.isNotEmpty(value) && $.operate.checkImgType(value)){
                                return true
                            }
                        }
                        return false
                    },
                    /*stateJudgment:需要状态判断*/
                    handleTaskCmdRun(taskCmdRun,stateJudgment = true){
                        let form = {
                            processStepRunId:this.activeProcessStepRun.id,
                            taskCmdRunId:taskCmdRun.id
                        }
                        const name = taskCmdRun.taskCmd.name
                        $.modal.open(name,prefix+"/moveToOperationStation?"+ tansParams(form),"auto","auto")

                        // let taskCmdRunForm
                        // if(stateJudgment){
                        //     taskCmdRunForm = JSON.parse(JSON.stringify(taskCmdRun))
                        //     const taskStatus = parseInt(taskCmdRun.taskStatus)
                        //     switch (taskStatus) {
                        //         case task_status.NOT_START:
                        //             taskCmdRunForm.taskStatus = task_status.EXECUTING
                        //             break;
                        //         case task_status.EXECUTING:
                        //             taskCmdRunForm.taskStatus = task_status.EXECUTED_FINISH
                        //             break;
                        //         default:
                        //             $.modal.alertError("不支持的任务状态过渡！");
                        //             return;
                        //     }
                        // }else{
                        //     taskCmdRunForm = taskCmdRun
                        // }
                        // $.axiosRequest.post(prefix+'/handleTaskCmdRun',taskCmdRunForm)
                        //     .then(res=>{
                        //         $.modal.msgSuccess(res.msg);
                        //         this.getTaskCmdListByProcessStepRun()
                        //     })
                    },restoreToOriginalData(){
                        Object.assign(this.$data,this.$options.data.call(this))
                    }
                }
                ,created(){

                },computed:{
                    processStepRunDisable(){
                        return this.taskCmdRunList.find(item=>item.taskStatus!=task_status.EXECUTED_FINISH) ? true : false
                    }
                },watch:{
                    activeProcessStepRun(newVal,oldVal){
                        this.$nextTick(()=>{
                            this.getTaskCmdListByProcessStepRun()
                        })
                    }
                },directives:{
                    taskStatus(el,{value,oldValue},vnode){
                        if(value == oldValue)
                            return
                        let text = '开始执行'

                        let taskStatus = parseInt(value.taskStatus)

                        switch(taskStatus){
                            case task_status.NOT_START:
                            case task_status.EXECUTED_FAIL:
                            case task_status.STOP:

                                taskStatus = task_status.EXECUTING

                                break;
                            case task_status.EXECUTING:

                                text = '执行完成'
                                taskStatus = task_status.EXECUTED_FINISH

                                break;
                            default:
                                text = ''
                                el.style.display = 'none'
                        }
                        el.innerHTML = text

                    },
                    // taskStatus:{
                    //     bind(el,{value}){
                    //         let text = '开始执行'
                    //
                    //         let taskStatus = parseInt(value.taskStatus)
                    //
                    //         switch(taskStatus){
                    //             case task_status.NOT_START:
                    //             case task_status.EXECUTED_FAIL:
                    //             case task_status.STOP:
                    //
                    //                 taskStatus = task_status.EXECUTING
                    //
                    //                 break;
                    //             case task_status.EXECUTING:
                    //
                    //                 text = '执行完成'
                    //                 taskStatus = task_status.EXECUTED_FINISH
                    //
                    //                 break;
                    //             default:
                    //                 text = ''
                    //                 el.style.display = 'none'
                    //         }
                    //         el.innerHTML = text
                    //     }
                    // }
                },components:{
                    'taskCmdRunComponent1':{
                        template:'#task-cmd-run-template',
                        data(){
                            return{
                                ruleForm: {
                                    name: '',
                                    region: '',
                                    date1: '',
                                    date2: '',
                                    delivery: false,
                                    type: [],
                                    resource: '',
                                    desc: ''
                                },
                            }
                        },created(){
                            console.log("taskCmdRunComponent1 init")
                        }
                    },
                }
            }
        }
    })


</script>
</body>
</html>